<template>
  <el-main>
    <center><h3>收房合同录入</h3></center>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="合同信息" name="first">
        <h4><el-button type="warning" size="mini" icon="el-icon-star-off" circle></el-button>&emsp;房产信息&emsp;</h4>
        <hr>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="小区名称"  label-width="150px" prop="premiseName">
                  <el-input v-model="form.premiseName" style="width: 200px" placeholder="请输入小区名"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-form-item label="房产信息" label-width="150px" prop="houseName">
                  <el-input v-model="form.houseName" style="width: 200px" placeholder="请输入房产信息"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">

                <el-form-item label="所有权类型" label-width="150px"
                              prop="houseType">
                  <el-select v-model="form.houseType"
                             placeholder="请选择所有权类型">
                    <el-option label="国有房产" value="1"/>
                    <el-option label="直管房产" value="2"/>
                    <el-option label="自管房产" value="3"/>
                    <el-option label="军队房产" value="5"/>
                    <el-option label="集体所有房产" value="6"/>
                    <el-option label="私有(自由)房产" value="7"/>
                    <el-option label="港、澳、台投资房产" value="8"/>
                    <el-option label="涉外房产" value="9"/>
                    <el-option label="其它房产" value="10"/>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-form-item label="房产证书编号" label-width="150px" prop="houseZsNo">
                  <el-input v-model="form.houseZsNo" style="width: 200px" placeholder="请输入房产证书编号"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="产权地址" label-width="150px" prop="cqAddress">
                  <el-input v-model="form.cqAddress" style="width: 200px" placeholder="请输入产权地址"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <h4><el-button type="warning" size="mini" icon="el-icon-star-off" circle></el-button>&emsp;业主信息&emsp;</h4>
          <hr>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="业主姓名" label-width="150px" prop="ownerName">
                  <el-input v-model="form.ownerName" style="width: 200px" placeholder="请输入业主姓名"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-form-item label="业主证件号码" label-width="150px" prop="ownerIdCard">
                  <el-input v-model="form.ownerIdCard" style="width: 200px" placeholder="请输入业主证件号码"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="业主手机号" label-width="150px" prop="ownerMobile">
                  <el-input v-model="form.ownerMobile" style="width: 200px" placeholder="请输入业主手机号"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-form-item label="业主联系地址" label-width="150px" prop="ownerContactAddress">
                  <el-input v-model="form.ownerContactAddress" style="width: 200px" placeholder="请输入业主联系地址"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="签约人(甲方)" label-width="150px" prop="signUserName">
                  <el-input v-model="form.signUserName" style="width: 200px" placeholder="请输入签约人(甲方)"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-form-item label="签约人证件号" label-width="150px" prop="signUserIdCard">
                  <el-input v-model="form.signUserIdCard" style="width: 200px" placeholder="请输入签约人证件号"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="签约人手机号" label-width="150px" prop="signUserMobile">
                  <el-input v-model="form.signUserMobile" style="width: 200px" placeholder="请输入签约人手机号"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-form-item label="紧急联系电话" label-width="150px" prop="signUserEmergencyPhone">
                  <el-input v-model="form.signUserEmergencyPhone" style="width: 200px" placeholder="请输入紧急联系电话"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="银行账户类型" label-width="150px" prop="accountType">
                  <el-select v-model="form.accountType" style="width: 200px" placeholder="请选择银行账户类型">
                    <el-option label="对公类型" value="1"/>
                    <el-option label="对私类型" value="2"/>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <h4><el-button type="warning" size="mini" icon="el-icon-star-off" circle></el-button>&emsp;租约信息&emsp;</h4>
          <hr>
          <el-row>
            <el-col :span="6">
              <el-form-item label="租约期限">
                <el-date-picker clearable size="small" style="width: 200px"
                                v-model="form.leaseStartTime"

                                value-format="yyyy-MM-dd"
                                placeholder="选择租约期限开始时间">
                </el-date-picker>
                至
                <el-date-picker clearable size="small" style="width: 200px"
                                v-model="form.leaseEndTime"

                                value-format="yyyy-MM-dd"
                                placeholder="选择租约期限结束时间">
                </el-date-picker>
              </el-form-item>
            </el-col><br>
            <el-col :span="2">
              <div class="grid-content bg-purple-dark">
                <el-form-item label="业务员" label-width="150px" prop="sfUserName">
                  <el-input v-model="form.sfUserName" style="width: 200px" placeholder="请输入业务员"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="租金" label-width="150px" prop="monthRent">
                  <el-input v-model="form.monthRent" style="width: 200px" placeholder="请输入收房月租金"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-form-item label="房产押金" label-width="150px" prop="depositMoney">
                  <el-input v-model="form.depositMoney" style="width: 200px" placeholder="请输入房产押金"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="支付">
                  押
                  <el-select v-model="form.depositType" style="width: 60px" placeholder="">
                    <el-option value="1"/>
                    <el-option value="2"/>
                    <el-option value="3"/>
                    <el-option value="4"/>
                  </el-select>
                  付
                  <el-select v-model="form.paymentType" style="width: 60px" placeholder="">
                    <el-option value="1"/>
                    <el-option value="2"/>
                    <el-option value="3"/>
                    <el-option value="4"/>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="备注" prop="remark">
                  <el-input type="textarea" :rows="6" style="width: 400px"  v-model="form.remark" placeholder="请输入备注"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <center>
            <el-button type="warning" round @click="xyb1">下一步</el-button>
          </center>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="附件" name="second">
        <center>
          <el-button type="warning" icon="el-icon-star-off" circle></el-button>房产证图片
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload><br>
          <el-button type="warning" icon="el-icon-star-off" circle></el-button>收房合同
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload><br>
          <el-button type="warning" icon="el-icon-star-off" circle></el-button>业主身份证明
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
          <el-button type="warning" round @click="xyb2">下一步</el-button>
          <el-button type="warning" round @click="syb1">上一步</el-button>
        </center>
      </el-tab-pane>
      <el-tab-pane label="付款单" name="third">
        <template>
          <el-table
            :data="paymentPlans"
            border
            style="width: 100%">
            <el-table-column
              align="center"
              prop="payNumber"
              label="序号"
              width="60">
            </el-table-column>
            <el-table-column
              align="center"
              prop="payableDate"
              label="应付日期">
            </el-table-column>
            <el-table-column
              align="center"
              label="金额">
              <template slot-scope="scope">
                <p v-if="scope.row.payNumber == 0">押金:</p>
                {{scope.row.paymentAmount}}元
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="税费">
              <template slot-scope="scope">
                {{scope.row.tax}}元
              </template>
            </el-table-column>
            <el-table-column
              label="付款状态"
              align="center">
              <template slot-scope="scope">
                <p v-if="scope.row.payState==1">未付</p>
                <p v-if="scope.row.payState==2">已付</p>
              </template>
            </el-table-column>
            <el-table-column
              label="房产租金周期"
              align="center"
              width="300">
              <template slot-scope="scope">
                {{scope.row.paymentDaysBegin}} 至 {{scope.row.paymentDaysEnd}}
              </template>
            </el-table-column>
            <!--            <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                          </template>
                        </el-table-column>-->
          </el-table><br><br>
          <center>
          <el-button type="warning" round @click="syb2">上一步</el-button>
          <el-button type="warning" round @click="submit">保存</el-button>
          </center>
        </template>
      </el-tab-pane>
    </el-tabs>
  </el-main>
</template>
<script>
import {addContract,getPaymentPlanList} from "@/api/renting/contract";
export default {
  name: "addContract",
  components: {},
  data() {
    return {
      paymentPlans:[],
      activeName: 'first',
      form: {},
      imageUrl: '',
    };
  },
  created() {

  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    xyb1(){
      this.activeName='second';
    },
    xyb2(){
      this.activeName='third';
      getPaymentPlanList(this.form).then(response => {
        this.paymentPlans = response.data;
      });
    },
    syb1(){
      this.activeName='first';
    },
    syb2(){
      this.activeName='second';
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    submit() {
      addContract(this.form).then(response => {
          this.msgSuccess("新增成功");
          this.form = {}
          this.$router.push("list")
        }
      )
    },
  }
};
</script>



<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
